<template>
  <el-table :data="data"
            border
            :hender-cekk-style="{background:'#304156',color:'#fff'}"
            @selection-change="handleSelectionChange"
            :span-method="objectSpanMethod"
            highlight-current-row
            :row-class-name="tableRowClassName"
            @current-change="soleSelect">
    <el-table-column type="selection"
                     v-if="showCheckBox"
                     width="55"
                     align="center"></el-table-column>
    <el-table-column type="index"
                     v-if="ShowIndex"
                     width="55"
                     align="center"
                     label="序号"></el-table-column>
    <slot v-if="custom"></slot>
    <el-table-column v-else
                     v-for="(col,index) in rowHeader"
                     :key="index"
                     :width="col.width"
                     :min-width="col.width"
                     :align="center"
                     :prop="col.prop"
                     :fixed="col.fixed"
                     :label="label">
      <template slot-scope="scope">
        <ex-slot v-if="col.render"
                 :render="col.render"
                 :row="scope.row"
                 :index="scope.$index"
                 :column="col"></ex-slot>
        <span v-else>
          {{scope.row[col.prop]}}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
//自定义组件
var exSolt = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },

  render: (b, data) => {
    const params = {
      row: data.params.row,
      index: data.props.index
    }
    if (data.props.column) params.column = data.props.column
    return data.props.render(b, params)
  }
}
export default {
  name: "UKTable",
  components: {
    'ex-slot': exSolt
  },
  props: {
    //表格数据
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    //需要自定义column
    custom: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    //表头数据
  }
}
</script>

<style>
</style>